<template>
  <div>
    <el-card class="login">
      <div slot="header">
        <span>登录后台</span>
      </div>

      <k-form class="login-form" :data="form" :rules="rules" @submit="onSubmit">
        <k-form-item label="登录账号" prop="username">
          <el-input v-model="form.username"></el-input>
        </k-form-item>

        <k-form-item label="登录密码" prop="password">
          <el-input v-model="form.password" type="password"></el-input>
        </k-form-item>

        <k-form-item>
          <el-button type="primary" native-type="submit" :loading="subing">立即登录</el-button>
        </k-form-item>
      </k-form>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    data () {
      return {
        form: {},
        rules: {
          username: [
            { required: true, message: '请输入登录账号' }
          ],
          password: [
            { required: true, message: '请输入登录密码' }
          ]
        },
        subing: false
      }
    },
    methods: {
      onSubmit () {
        this.subing = true
        this.$auth.login(this.form.username, this.form.password)
          .finally(() => this.subing = false)
          .then(() => {
            console.log('success')
          })
          .catch((err) => {
            this.$message.error(err.message)
          })
      }
    }
  }
</script>

<style scoped lang="scss">
  .login {
    max-width: 500px;
    margin: 0 auto;
    margin-top: 10vh;
    .login-form {
      padding: 0 15px;
    }
  }
</style>
